<style scoped lang="scss">
.page-wrap{
  background: #f8f8f8;
}
.top-img{
  position: fixed;
  top: 0;
  left: 0;
  width: 750rpx;
  z-index: 1;
}
.topmask{
  height: 320rpx;
}
.grid-box{
  margin: 30rpx;
  border-radius: 30rpx;
  overflow: hidden;
  box-shadow: rgba(50,50,50,.1) 0 0 30rpx 0;
  .grid-text {
    font-size: 28rpx;
    margin-top: 20rpx;
    color: #666;
  }
}

.ad-box{
  padding: 40rpx 30rpx;
}

.page-container{
  position: relative;
  z-index: 3;
  background: #f8f8f8;
  border-top-left-radius: 60rpx;
  border-top-right-radius: 60rpx;

  .user{
    z-index: 4;
    position: absolute;
    top:-66rpx;
    left:0rpx;
    padding-left: 30rpx;
    height: 130rpx;
    display: flex;
    .user-nickname{

    }
    .user-headimg{
      height: 130rpx;
      width: 130rpx;
      background: #fff;
      border-radius: 50%;
      overflow: hidden;
	  box-shadow: rgba(50,50,50,.3) 0 0 20rpx 0;
      &__img{
        margin: 5rpx;
        height: 120rpx;
        width: 120rpx;
        border-radius: 50%;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-color: #f2f2f2;
      }
    }
    .user-nickname{
      font-size: 32rpx;
      color: #fff;
      padding: 10rpx 0 0 30rpx;
    }
  }
}

.card{
  &-box{
    display: flex;
    height: 545rpx;
  }
  &-left{
    margin: 0 22rpx 0 32rpx;
    display: flex;
    flex-direction: column;
  }
  &-right{
    margin: 0 32rpx 0 0;
    display: flex;
    flex-direction: column;
  }
  &-item{
    background: #fff;
    width: 332rpx;
    box-shadow: rgba(100,100,100,.1) 0 0 20rpx 0;
    border-radius: 20rpx;
    flex:1;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    &__info{
      padding: 46rpx 30rpx 0;
      .card-name{
        color: #000;
        font-size: 36rpx;
        font-weight: bold;
      }
      .card-desc{
        margin-top: 12rpx;
        font-size: 20rpx;
        color: #6f6e6e;

      }
    }
  }
}

.new-ul{
  padding: 20rpx;
  .new-li{
    width: 100%;
    padding: 8px 0;
    justify-content: space-between;
    .l{
      flex: 1;
      padding-right: 20rpx;
      .title{
        color: #222222;
      }
      .create_at{
        /*color: #06A1FB;*/
        color: #999;
      }
    }
    .r{
      width: 220rpx;
      .thumb{
        width: 200rpx;
        height: 134rpx;
        margin: 0 auto;
        border-radius: 5%;
      }
    }

  }
}

.top-nav{
  position: fixed;
  left: 0;
  top: 0;
  width: 750rpx;
  z-index: 9;
}
</style>
<template>
  <div class="page-wrap">
    <image class="top-img" mode="widthFix" src="/static/home/top.jpg"></image>
    <div class="top-nav" :style="{opacity:topNavOpacity}">
      <u-navbar title="有点庆幸"></u-navbar>
    </div>
    <div class="topmask"></div>

    <div class="page-container">
      <div class="user" @click="toUser">
        <div class="user-headimg"><div class="user-headimg__img" :style="{backgroundImage:'url('+userInfo.headimg+')'}"></div></div>
        <div class="user-nickname">{{userInfo.id?userInfo.nickname:'请登录'}}</div>
      </div>
      <div style="height: 110rpx"></div>
      <div class="card-box">
        <div class="card-left">
          <div class="card-item" @click="$linkTo('/pages/task/index')" :style="{backgroundImage:'url('+leftCardBgImg+')'}">
            <div class="card-item__info">
              <div class="card-name">公益项目</div>
              <div class="card-desc">小众但却真实的渴望</div>
            </div>
          </div>
        </div>
        <div class="card-right">
          <div class="card-item" @click="$linkTo('/pages/word/exam')" :style="{backgroundImage:'url('+rightCardBgImg1+')'}">
            <div class="card-item__info">
              <div class="card-name">背单词</div>
              <div class="card-desc">背单词捐大米</div>
            </div>
          </div>
          <div style="height: 20rpx"></div>
          <div class="card-item" @click="$linkTo('/pages/run/index')" :style="{backgroundImage:'url('+rightCardBgImg2+')'}">
            <div class="card-item__info">
              <div class="card-name">捐步数</div>
              <div class="card-desc">每一步都在公益路上</div>
            </div>
          </div>
        </div>
      </div>
<!--      <div class="grid-box">-->
<!--        <u-grid :col="3">-->
<!--          <u-grid-item @click="$linkTo('/pages/task/index')">-->
<!--            <u-badge count="9" :offset="[30, 30]"></u-badge>-->
<!--            <u-icon color="#444" name="heart" :size="46"></u-icon>-->
<!--            <view class="grid-text">公益项目</view>-->
<!--          </u-grid-item>-->
<!--          <u-grid-item>-->
<!--            <u-icon color="#444" name="order" :size="46"></u-icon>-->
<!--            <view class="grid-text">背单词</view>-->
<!--          </u-grid-item>-->
<!--          <u-grid-item>-->
<!--            <u-icon color="#444" name="coupon" :size="46"></u-icon>-->
<!--            <view class="grid-text">捐步数</view>-->
<!--          </u-grid-item>-->
<!--          <u-grid-item>-->
<!--            <u-icon color="#444" name="edit-pen" :size="46"></u-icon>-->
<!--            <view class="grid-text">常识答题</view>-->
<!--          </u-grid-item>-->
<!--          <u-grid-item>-->
<!--            <u-icon color="#444" name="bookmark" :size="46"></u-icon>-->
<!--            <view class="grid-text">看新闻</view>-->
<!--          </u-grid-item>-->
<!--          <u-grid-item>-->
<!--            <u-icon color="#444" name="clock" :size="46"></u-icon>-->
<!--            <view class="grid-text">每日一句</view>-->
<!--          </u-grid-item>-->
<!--          <u-grid-item>-->
<!--            <u-icon color="#444" name="trash" :size="46"></u-icon>-->
<!--            <view class="grid-text">树洞</view>-->
<!--          </u-grid-item>-->
<!--          <u-grid-item @click="taggleShowSharePopup">-->
<!--            <u-icon color="#444" name="share" :size="46"></u-icon>-->
<!--            <view class="grid-text">一键分享</view>-->
<!--          </u-grid-item>-->
<!--          <u-grid-item @click="$linkTo('/pages/message/messageCenter')">-->
<!--            <u-icon color="#444" name="more-circle" :size="46"></u-icon>-->
<!--            <view class="grid-text">消息中心</view>-->
<!--          </u-grid-item>-->
<!--          <u-grid-item @click="$linkTo('/pages/user/index')">-->
<!--            <u-icon color="#444" name="account" :size="46"></u-icon>-->
<!--            <view class="grid-text">个人中心</view>-->
<!--          </u-grid-item>-->
<!--          <u-grid-item @click="$linkTo('/pages/common/page?name=about')">-->
<!--            <u-icon color="#444" name="info-circle" :size="46"></u-icon>-->
<!--            <view class="grid-text">关于我们</view>-->
<!--          </u-grid-item>-->
<!--          <u-grid-item @click="taggleShowConcatPopup">-->
<!--            <u-icon color="#444" name="server-man" :size="46"></u-icon>-->
<!--            <view class="grid-text">联系客服</view>-->
<!--          </u-grid-item>-->
<!--        </u-grid>-->
<!--      </div>-->

      <div class="ad-box">
        <layout-ad :border-radius="30" :height="300" :pid="1"></layout-ad>
      </div>
    </div>

<!--    <div class="nav bg-white">-->
<!--      <div class=" flex row m-b-10">-->
<!--        <navigator url="/pages/task/index" class="nav-item">-->
<!--          <image class="nav-item-icon" src="/static/home/task.png"></image>-->
<!--          <div class="nav-item-title">公益项目</div>-->
<!--        </navigator>-->
<!--        <div @click="taggleShowSharePopup" class="nav-item">-->
<!--          <image class="nav-item-icon" src="/static/home/share.png"></image>-->
<!--          <div class="nav-item-title">一键分享</div>-->
<!--        </div>-->
<!--        <navigator url="/pages/message/messageCenter" class="nav-item">-->
<!--          <image  class="nav-item-icon" src="/static/home/notify.png"></image>-->
<!--          <div class="nav-item-title">消息中心</div>-->
<!--        </navigator>-->
<!--        <navigator url="/pages/common/page?name=about" class="nav-item">-->
<!--          <image  class="nav-item-icon" src="/static/home/about.png"></image>-->
<!--          <div class="nav-item-title">关于我们</div>-->
<!--        </navigator>-->
<!--        <div @click="taggleShowConcatPopup" class="nav-item">-->
<!--          <image  class="nav-item-icon" src="/static/home/kefu.png"></image>-->
<!--          <div class="nav-item-title">联系客服</div>-->
<!--        </div>-->
<!--      </div>-->

<!--    </div>-->

<!--    <div class="line10"></div>-->
<!--    <div class="bg-white">-->
<!--      <div class="fun-tab-title">热门活动</div>-->
<!--      <div class="fun-container task-ul" v-if="hotTaskList.length>0">-->
<!--        <navigator v-for="(item,index) in hotTaskList" :key="index" :url="'/pages/task/detail?id='+item.id" class="new-li flex fz-14">-->
<!--          <div class="l">-->
<!--            <div class="title fz-16 m-b-10">{{item.title}}</div>-->
<!--            <div class="p-b-10" v-if="item.tags.length>0">-->
<!--              <u-tag class="m-r-10" v-for="(tag,idx) in item.tags" :type="tag.style" :key="idx" size="mini" shape="circle" :text="tag.text"></u-tag>-->
<!--            </div>-->
<!--            <div class="create_at fz-12">{{item.create_at}}</div>-->
<!--          </div>-->
<!--          <div class="r">-->
<!--            <div class="color-red fz-18"><span class="fz-12">￥</span>{{item.reward_pirce}}</div>-->
<!--            <div class="num-box m-t-4 c8"><span class="color-green">{{item.join_num}}</span>/{{item.require_num||'不限次数'}}</div>-->
<!--          </div>-->
<!--        </navigator>-->
<!--      </div>-->
<!--      <div class="text-center p-15" v-if="filterTask.total>hotTaskList.length">-->
<!--        <u-button :loading="taskLoading" :ripple="true" @click="loadTaskInfo(1)" size="mini">加载更多</u-button>-->
<!--      </div>-->
<!--    </div>-->

<!--    <div class="line10"></div>-->

    <div class="fun-tab" style="background: #f8f8f8;" v-if="info_types.length>0">
      <div class="fun-tab-title fz-b">常见问题</div>
      <div class="fun-tab-nav">
        <div v-for="(item,index) in info_types" :key="index" @click="changeInfoTab(item.id)" :class="{active:item.id == select_info_type_id}" class="nav-item">{{item.title}}</div>
        <!--      <div class="nav-item">活动</div>-->
        <navigator url="/pages/info/index" class="nav-more">更多 <layout-icon type="icon-arrow-right" display="inline"></layout-icon></navigator>
      </div>
    </div>
    <div class="fun-container new-ul" v-if="infoList.length>0">
      <block v-for="(item,index) in infoList" :key="index">
        <navigator :url="'/pages/info/info?id='+item.id" class="new-li flex fz-14" v-if="index<5">
          <div class="l">
            <div class="title fz-16 m-b-8">{{item.title}}</div>
            <div class="create_at fz-12">{{item.create_at}}</div>
          </div>
          <div class="r">
            <image class="thumb" :src="item.thumb" mode="scaleToFill"   />
          </div>
        </navigator>
      </block>
    </div>

    <u-popup v-model="showSharePopup" mode="center" border-radius="6">
      <div class="text-center p-20">
        <div>越努力,越幸运.</div>
        <div class="c6 fz-14 p-15">将本应用分享给您的好友,看见自己的价值</div>
        <button type="primary"  open-type="share" size="mini" >分享给好友</button>
      </div>
    </u-popup>

    <u-popup v-model="showConcatPopup" mode="center" border-radius="6">
      <div class="text-center p-20">
        <div>越努力,越幸运.</div>
        <div class="c6 fz-14 p-15">客服在线时间9:00-21:00(周一至周五)</div>
        <button type="primary"  open-type="contact" size="mini" >联系客服</button>
      </div>
    </u-popup>

  </div>
</template>

<script>

import { error, hideLoading, linkToEasy, modal, showLoading, toast } from '@/common/fun'
import { pageMixin } from '@/mixins'
import { flashUserInfo, goods, info, infotype } from '@/api'
import { task } from '@/api/task'
import { Exception } from '@/common/Exception'
import store from '@/store'

import LayoutAd from '@/components/layout-ad/layout-ad'
import LayoutIcon from '@/components/layout-icon/layout-icon'

import UPopup from '@/uview-ui/components/u-popup/u-popup'
import UButton from '@/uview-ui/components/u-button/u-button'
import UTag from '@/uview-ui/components/u-tag/u-tag'
import UGrid from '@/uview-ui/components/u-grid/u-grid'
import UGridItem from '@/uview-ui/components/u-grid-item/u-grid-item'
import UIcon from '@/uview-ui/components/u-icon/u-icon'
import UBadge from '@/uview-ui/components/u-badge/u-badge'
import UNavbar from '@/uview-ui/components/u-navbar/u-navbar'
import LayoutPageTitle from '@/components/layout-page-title/layout-page-title'

import env from '@/common/env'
import { checkIsLogin } from '@/common/helper'

export default {
  components: { LayoutPageTitle, UNavbar, UBadge, UIcon, UGridItem, UGrid, UTag, UButton, UPopup, LayoutIcon, LayoutAd },
  mixins: [pageMixin],
  computed: {
    ischeck () {
      return this.$store.getters['system/getIsCHeck']
    }
  },
  data () {
    return {
      userInfo: {},
      topNavOpacity: 0,
      leftCardBgImg: 'https://qingclouds-server.oss-cn-shanghai.aliyuncs.com/6e149c1dca7ccdf2/198ef88299a6af76.png',
      rightCardBgImg1: 'https://qingclouds-server.oss-cn-shanghai.aliyuncs.com/9c97ecc40f0c9a88/17951455f52cda50.png',
      rightCardBgImg2: 'https://qingclouds-server.oss-cn-shanghai.aliyuncs.com/cec18abdbd0e962e/4a8fa198ac78ced0.png',
      defaultHeadimg: env.defaultHeadimg,
      showSharePopup: false,
      showConcatPopup: false,
      scrollTop: 0,
      slides: [],
      filterTask: {
        total: 0,
        page: 1,
        size: 3
      },
      taskLoading: false,
      hotTaskList: [],
      info_types: [],
      select_info_type_id: '',
      infoList: [],

      hotGoods: {
        select_type_id: 1,
        types: [],
        page: 1,
        isFinish: false,
        list: []
      }
    }
  },
  onPageScroll (e) {
    this.scrollTop = e.scrollTop
    this.topNavOpacity = e.scrollTop / 44
  },
  onNavigationBarButtonTap (evt) {
    console.log(evt)
    if (evt.type === 'share') {
      uni.setClipboardData({
        data: '欢迎加入有点庆幸,明天的你,肯定会狠狠感谢今天努力的你。',
        success: function () {
          modal({ content: '文案已经添加到剪切板，直接复制发给好友即可', showCancel: false })
        }
      })
    }
  },
  methods: {
    toUser () {
      if (checkIsLogin(0, 0)) {
        linkToEasy('/pages/user/index')
      } else {
        linkToEasy('/pages/login')
      }
    },
    taggleShowConcatPopup () {
      this.showConcatPopup = true
    },
    taggleShowSharePopup () {
      this.showSharePopup = true
    },
    soon () {
      toast('即将上线', 'none')
    },
    camera () {
      this.$qrScan()
    },
    toAd (item) {
      this.$redirectAd(item)
    },
    onCloseShareDialog () {
      this.$closePop('shareModal')
    },
    goShare () {
      this.$openPop('shareModal')
    },
    changeInfoTab (id) {
      var self = this
      this.load_info(id, function (res) {
        self.select_info_type_id = id
        self.infoList = res
      })
    },

    onGotUserInfo (e) {
    },
    plus () {
      this.mynum++
    },

    tap () {
      console.log('do noting from ' + this.$name)
    },
    load_info (id, cb) {
      showLoading()
      info({ type_id: id, size: 3 }).then(res => {
        cb(res.data.list)
        hideLoading()
      }).catch((err) => { error(err.msg) })
    },
    async bindReachBottom () {
      // console.log('bindReachBottom')
      // const cate_id = this.hotGoods.select_type_id
      // const res = await this.loadGoods(cate_id)
      // if (res === false) return
      // const list = this.hotGoods.list.concat(res.data)
      // this.hotGoods.list = list
      //
      // // 分页的
      // if (parseInt(res.current_page) < res.last_page) {
      //   this.hotGoods.page = parseInt(res.current_page) + 1
      // } else {
      //   this.hotGoods.isFinish = true
      // }
    },

    async loadTaskInfo (require_tip = false) {
      if (this.hotTaskList.length > 0 && this.filterTask.total <= this.hotTaskList.length) {
        toast('没有更多了', 'none')
        return
      }
      if (require_tip) this.taskLoading = true
      var tag_styles = ['primary', 'success', 'warning', 'error', 'info']
      const hotTaskList = await task({ action: 'hot', page: this.filterTask.page, size: this.filterTask.size }).then(res => {
        this.filterTask.total = res.data.total
        if (res.data.list.length > 0) this.filterTask.page++
        return res.data.list.map(row => {
          return {
            ...row,
            tags: row.tags ? row.tags.split('|').map(tag => {
              return { text: tag, style: tag_styles[parseInt(Math.random() * 5)] }
            }) : []
          }
        })
      }).catch(err => {
        Exception.handle(err)
      })
      if (require_tip) this.taskLoading = false
      this.hotTaskList = this.hotTaskList.concat(hotTaskList)
    },
    loadHomeInfoFunc () {
      var self = this
      return new Promise((resolve, reject) => {
        infotype().then(ret => {
          this.info_types = ret.data.list

          if (this.info_types.length > 0 && this.info_types[0].id) {
            console.log(this.info_types[0].id)
            // 居然得这样啊
            this.load_info(this.info_types[0].id, function (res) {
              self.select_info_type_id = self.info_types[0].id
              self.infoList = res
              resolve(true)
            })
          }
        }).catch(err => reject(Error(err.msg || '获取任务分类失败')))
      })
    },
    async _init_func () {
      try {
        var task1 = this.loadTaskInfo()
        var task2 = this.loadHomeInfoFunc()
        showLoading()
        Promise.all(task1, task2).then(() => {
          hideLoading()
        }).catch(() => {
          hideLoading()
        })
      } catch (e) {
        Exception.handle(e)
      }
    }

  },
  // 加载更多
  onReachBottom () {
    this.bindReachBottom()
  },
  onShareAppMessage () {
    const userInfo = store.getters.getUserInfo(); let path = '/pages/home'
    // 加入分享标识
    if (userInfo && userInfo.id) {
      path = path + '?from_mid=' + userInfo.id
    }
    return {
      title: '有点庆幸-明天的你会感谢今天努力的你。',
      path: path
    }
  },
  onShow () {
    if (checkIsLogin(0, 0)) {
      // 刷新信息
      flashUserInfo().then(res => {
        console.log(res)
        this.userInfo = res.data
      }).catch(e => {

      })
    }
    this.userInfo = store.getters['user/getUserInfo']()
  },
  onLoad (options) {
    this._init_func()
  }
}

</script>
